<template>
  <div class="empty-box">
    <div class="img-box">
      <!--
        使用 v-if/v-else 来根据 isSearch prop 动态显示不同的图片和文字。
        我们使用 @/assets/... 的别名路径，使其更健壮。
      -->
      <template v-if="props.isSearch">
        <img src="@/assets/search_table_empty.png" alt="No search results" />
        <p>Sorry, 没有找到您搜索的内容哦~</p>
      </template>
      <template v-else>
        <img src="@/assets/table_empty.png" alt="No data" />
        <p>这里空空如也~</p>
      </template>
    </div>
  </div>
</template>

<script setup lang="ts">
// --- 1. 使用 defineProps 声明组件接收的属性 ---
// 这替代了旧代码中的 @Prop 装饰器
const props = defineProps({
  isSearch: {
    type: Boolean,
    default: false // 默认值为 false，表示是默认的空状态
  }
});

// <script setup> 中无需显式声明 name，它会从文件名推断
</script>

<style scoped lang="scss">
.empty-box {
  text-align: center;
  margin: 120px 0; // 保持你原有的外边距

  .img-box {
    display: inline-block; // 确保内容居中
  }

  img {
    width: 238px;
    height: 184px;
    margin-bottom: 26px;
  }

  p {
    color: #818693; // 保持你原有的文字颜色
    font-size: 14px;
  }
}
</style>
